<template>
  <div>
    <div data-server-rendered="true" id="__nuxt">
      <div id="__layout">
        <div data-fetch-key="0" class="app light macwk-animation">
          <!--首部START-->
          <header class="app-header">
            <div class="app-header-topbar dk pc-model black">
              <div class="app-header-main">
                <nav class="nav top-bar-nav flex">
                  <router-link :to="{ path: '/perfect' }" class="nav-link">
                    推荐必去
                  </router-link>
                  <router-link :to="{ path: '/recommend' }" :class="activeIndex == '/recommend' ? 'nav-link active' : 'nav-link'">
                    提交景点
                  </router-link>
                  <router-link :to="{ path: '/feedback' }" :class="activeIndex == '/feedback' ? 'nav-link active' : 'nav-link'">
                    留言反馈
                  </router-link>
                  <router-link :to="{ path: '/perfect' }" class="nav-link">
                    特价优惠
                  </router-link>
                </nav>
                <div class="nav justify-content-end mr-5">
                  <router-link :class="activeIndex == '/order' ? 'nav-link active' : 'nav-link'" :to="{ path: '/order' }">
                    我的订单
                  </router-link>
                  <router-link :class="activeIndex == '/collect' ? 'nav-link active' : 'nav-link'" :to="{ path: '/collect' }">
                    我的收藏
                  </router-link>
                </div>
                <nav class="nav justify-content-end">

                  <div style="display: flex" v-if="this.$store.getters['catUser/getUser']">
                    <router-link :class="activeIndex == '/user' ? 'nav-link active' : 'nav-link'" :to="{ path: '/user' }" type="text" slot="reference">欢迎 {{
                        JSON.parse(this.$store.getters['catUser/getUser']).userName
                      }}
                    </router-link>
                    <el-popover placement="top" width="180" v-model="visible">
                      <p>确定退出登录吗？</p>
                      <div style="text-align: right; margin: 10px 0 0">
                        <el-button size="mini" type="text" @click="visible = false"
                        >取消
                        </el-button
                        >
                        <el-button type="primary" size="mini" @click="logout"
                        >确定
                        </el-button
                        >
                      </div>
                      <router-link class="nav-link px-2" :to="{ path: '' }" type="text" slot="reference">退出
                      </router-link>
                    </el-popover>
                  </div>
                  <div v-else style="display: flex">
                    <router-link class="nav-link px-2" :to="{ path: '/login' }">
                      登录
                    </router-link>
                    <router-link class="nav-link px-2" :to="{ path: '/register' }">
                      注册
                    </router-link>
                  </div>

                  <router-link :class="activeIndex == '/shopping' ? 'nav-link active' : 'nav-link'" :to="{ path: '/shopping' }">
                    购物车({{ this.$store.getters["shoppingCart/getNum"] }})
                  </router-link>
                </nav>
              </div>
            </div>
            <div class="app-header-navbar white shadow-4 border-bottom pc-model">
              <div class="app-header-main">
                <router-link :to="{ path: '/' }"
                             class="app-header-logo">
                  <!--<img src="@/assets/imgs/logo.png" width="800px">-->
                  <span>Flycat</span>
                </router-link>
                <div class="app-header-nav nav">
                  <router-link :to="{ path: '/' }" :class="activeIndex == '/' ? 'nav-link active' : 'nav-link'">
                    首页
                  </router-link>
                  <router-link :to="{ path: '/product' }"
                               :class="activeIndex == '/product' ? 'nav-link active' : 'nav-link'">
                    景点
                  </router-link>
                  <router-link :to="{ path: '/gl' }" :class="activeIndex == '/gl' ? 'nav-link active' : 'nav-link'">
                    攻略
                  </router-link>
                  <router-link :to="{ path: '/special' }"
                               :class="activeIndex == '/special' ? 'nav-link active' : 'nav-link'">
                    专题
                  </router-link>
                  <router-link :to="{ path: '/perfect' }"
                               :class="activeIndex == '/perfect' ? 'nav-link active' : 'nav-link'">
                    榜单
                  </router-link>
                </div>
                <div class="app-header-search grid-list lazy-transition">
                  <div id="autosuggest">
                      <input type="text" autocomplete="off"
                             id="autosuggest__input"
                             placeholder="输入关键词搜索景点或攻略…"

                             v-model="search"
                      >
                    <button @click="searchClick" class="btn search-to">
                      <i class="icon-search"
                    ></i>
                    </button>
                    <div id="autosuggest-autosuggest__results" class="autosuggest__results-container">

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>
          <!--首部END-->
          <!-- 主要区域容器 -->
          <!-- <router-view></router-view> -->
          <Nuxt keep-alive/>
          <!--Main-->
          <div class="macwk-footer white border-top pc-model">
            <div class="container">
              <router-link :to="{ path: '/' }" class="logo"><span class="ml-4">FlyCat</span></router-link>
              <div class="nav">
                <router-link :to="{ path: '/' }" :class="activeIndex == '/' ? 'nav-link active' : 'nav-link'">首页</router-link>
                <router-link :to="{ path: '/about' }" :class="activeIndex == '/about' ? 'nav-link active' : 'nav-link'">关于</router-link>
                <router-link :to="{ path: '/contact' }" :class="activeIndex == '/contact' ? 'nav-link active' : 'nav-link'">联系</router-link>
                <router-link :to="{ path: '/privacy' }" :class="activeIndex == '/privacy' ? 'nav-link active' : 'nav-link'">隐私</router-link>
                <router-link :to="{ path: '/changelogs' }" :class="activeIndex == '/changelogs' ? 'nav-link active' : 'nav-link'">更新日志</router-link>
              </div>
              <div class="copyright">
                <p class="mb-0">
            <span class="mr-3">
            <a href="https://beian.miit.gov.cn/"
               target="_blank">冀ICP备19036195号</a>
            </span>
                  <span>flycat.com © 2022.All rights reserved.</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {mapActions} from "vuex";
import {mapGetters} from "vuex";

export default {
  beforeUpdate() {
    // console.log("排查退出账户, this.activeIndex", this.activeIndex, "this.$route.path", this.$route.path);
    this.activeIndex = this.$route.path;
    // console.log("beforeUpdate 此时高亮activeIndex", this.activeIndex);
  },
  name: "Index",
  components: {},
  props: {},
  data() {
    return {
      activeIndex: "", // 头部导航栏选中的标签
      search: "", // 搜索条件
      register: false, // 是否显示注册组件
      visible: false, // 是否退出登录
      partTime: false, // 兼职
    };
  },
  computed: {
    ...mapGetters(["catUser/getUser", "shoppingCart/getNum"]),
  },
  watch: {
    $route(to, from) {
      this.activeIndex = this.$route.path;
    },
    '$store.state.catUser.user'(val) {
      if (val === "") {
        // 用户没有登录
        this.$store.commit('shoppingCart/setShoppingCart', [])
      } else {
        let userInfo = JSON.parse(val)
        // 用户已经登录,获取该用户的购物车信息
        this.$axios
          .post("/cat/userCardProduct/getShoppingCart/" + userInfo.pid)
          .then((res) => {
            if (res.data.code === 200) {
              // 001 为成功, 更新vuex购物车状态
              console.log("添加购物车")
              this.$store.commit('shoppingCart/setShoppingCart', res.data.data.shoppingCartData)
              // this.setShoppingCart(res.data.data.shoppingCartData);
            } else {
              // 提示失败信息
              this.$message({
                showClose: false,
                message: "获取购物车失败, 请联系客服",
                type: "fail",
                duration: 3000,
                onClose: () => {
                },
              });
            }
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }
    },
  },
  mounted() {
    if (localStorage.getItem("user")) {
      // 如果已经登录，设置vuex登录状态
      this.$store.commit('catUser/setUser', localStorage.getItem("user"))
    }
    this.activeIndex = this.$route.path;
  },
  methods: {
    ...mapActions(["catUser/setUser", "catUser/setShowLogin", "shoppingCart/setShoppingCart"]),
    login() {
      console.log("点击登陆");
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      this.setShowLogin(true);
    },
    partTimeClick() {
      this.partTime = true;
    },
    handleClose(done) {
      done();
    },
    // 退出登录
    logout() {
      this.visible = false;
      // 清空本地登录信息
      localStorage.setItem("user", "");
      // 清空vuex登录信息
      this.$store.commit('catUser/setUser', "")
      this.$message({
        showClose: false,
        message: "你已退出",
        type: "success",
        duration: 100,
        onClose: () => {
        },
      });
    },

    // 接收注册子组件传过来的数据
    isRegister(val) {
      console.log(val + " 是否显示注册 ");
      this.register = val;
    },
    // 点击搜索按钮
    searchClick() {
      if (this.search != "") {
        // 跳转到全部商品页面,并传递搜索条件
        this.$router.push({path: "/product", query: {search: this.search}});
        this.search = "";
      }
    },
  },
};
</script>
<style>
/*@import "https://static.konlonair.com/macwk-client/css/7343d4b.css";*/
@import "../assets/css/macw.css";

* {
  list-style: none;
}
</style>
